<template>
	<view class="auditBox">
		<view class="top-box">
			<view class="auditBox-select">
				<view :class="[tabIndex==0?'auditBox-select-active':'auditBox-select-text']" @click="cutTab('all')">待审核</view>
				<view :class="[tabIndex==1?'auditBox-select-active':'auditBox-select-text']" @click="cutTab('pending')">通过</view>
				<view :class="[tabIndex==2?'auditBox-select-active':'auditBox-select-text']" @click="cutTab('execute')">退回</view>
			</view>
		</view>
		<view class="search">
			<view class="search-box">
				<icon class="icon" type="search" size="20"></icon>
				<input class="text" type="text" v-model="form.search" placeholder="输入查询内容"  />
			</view>
		</view>
		
		<scroll-view class="toAuditList" scroll-y @scrolltolower="scrollpage" :show-scrollbar="false">
			<view class="toAuditList-item" v-for="item,index in auditList" :key="item.id" @click="particulars(item.id)">
				<view class="toAuditList-item-order">
					<view class="toAuditList-item-order-mark">
						订单号：<text style="color: #000;">{{item.orderNo}}</text>
					</view>
					<view class="toAuditList-item-order-state" :class="[convertTo(item)=='待审核'?'pending':'' || convertTo(item)=='退回'?'execute':'' || convertTo(item)=='通过'?'accomplish':'']">
						 {{convertTo(item)}}
					</view>
				</view>
				<view class="toAuditList-item-order">
					<view class="toAuditList-item-order-mark">
						客户名称：<text>{{item.buyerCompanyName}}</text>
					</view>
					
				</view>
				<view class="toAuditList-item-order">
					<view class="toAuditList-item-order-mark">
						物料种类：<text>{{item.materialType}}</text>
					</view>
					<view style="color: #fe9918;">
						{{item.priority}}
					</view>
				</view>
				<view class="toAuditList-item-order">
					<view class="toAuditList-item-order-mark">
						收单时间：<text>{{item.acceptTime?item.acceptTime:''}}</text>
					</view>
					<view style="color: red;">
						￥{{item.totalAmount}}
					</view>
				</view>
				<view class="toAuditList-item-order">
					<view class="toAuditList-item-order-mark">
						项目名称：<text>{{item.projectName?item.projectName:''}}</text>
					</view>
					<view style="color:#796bd2;">
						{{item.buyerName}}
					</view>
				</view>
				<view class="toAuditList-item-order" v-if="item.projectNo">
					<view class="toAuditList-item-order-mark">
						项目编号：<text>{{item.projectNo}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		data() {
			return {
				tabIndex:0,
				auditList:[],
				pageInfo:{},
				isBottomOut:false,
				form:{
					search:"",
					pageSize: 40,
					currentPage:1,
					status:1
				},
				flg:false
			}
		},
		onShow(){
			this.getInfo()
		},
		watch: {
			// 搜索框防抖
			"form.search"(newVal){
				if (this.flg) {
				  return false
				}
				this.flg = true
				setTimeout(()=> {
					this.getInfo()
				  this.flg = false
				}, 1000)
			}
		},
		methods: {
			maskTopNavChange(id){
				this.toptabselected = id;	
			},
			getInfo(){
				
				if(this.form.search){
					this.form.pageSize = 1000
				}else{
					this.form.pageSize = 15
				}
				
				if(!this.isBottomOut){
					api.getApproveList(this.form).then(res=>{
						if(res.code == 0){
							if(this.form.search){
								this.auditList = res.data.result
							}else{
								let { result,page } = res.data
								let list = this.auditList
								list.push.apply(list,result)
								if(this.form.currentPage > page.totalPage){
									this.isBottomOut = true
									uni.showToast({
										title: '没有更多来了',
										icon:'none',
										duration: 2000
									});
								}
							}
						}
					})
				}
			},
			scrollpage(){
					let apiInfo = this.form;
					apiInfo.currentPage = apiInfo.currentPage + 1;
					this.form = apiInfo;
					this.getInfo()
			},
			convertTo(item){
				if(!item.status && item.deleted == 0){
					return '待审核'
				}else if(!item.status && item.deleted == 1){
					return '退回'
				}else{
					return '通过'
				}
			},
			particulars(id){
				uni.navigateTo({
					url: '/subcontractList/order/salesAdmin/salesOrder/details/details?type=toAudit&id=' + id
				});					
			},
			cutTab(type){
				if(type == 'all'){
					this.tabIndex = 0
					this.form.status = 1
					this.isBottomOut = false
					
				}else if(type == 'pending'){
					this.tabIndex = 1
					this.form.status = 3
					this.isBottomOut = false
				}else{
					this.tabIndex = 2
					this.form.status = 2
					this.isBottomOut = false
				}
				this.form.currentPage = 1
				this.isBottomOut = false
				this.auditList = []
				this.getInfo()
			},
		}
	}
</script>

<style lang="scss" scoped>
.auditBox{
	min-height: 100vh;
	background-color: #eaeaea;
	&-select{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		&-text,&-active{
			font-weight: 700;
			height: 80rpx;
			background-color: #fbfbfb;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&-active{
			color: #30a875;
			border-bottom: 6rpx solid #30a875;
		}
	}
	.top-box {
		width:100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content:space-around;
		background-color: #fff;
	}
	.search{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #eaeaea;
		.search-box {
			display: flex;
			background-color: white;
			height: 70rpx;
			border-radius: 16rpx;
			overflow: hidden;
			-moz-box-shadow: -1rpx 1rpx 15rpx #333333;
			-webkit-box-shadow: -1rpx 1rpx 15rpx #333333;
			box-shadow: -1rpx 1rpx 15rpx #333333;
		
			.icon {
				padding: 16rpx;
			}
		
			.text {
				flex: 1;
				height: 70rpx;
			}
		}
	}
	
		
	.toAuditList{
		box-sizing: border-box;
		padding: 0 20rpx;
		height: calc(100vh - 192rpx);
		background-color: #eaeaea;
		&-item{
			width: 100%;
			line-height: 55rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			font-size: 26rpx;
			margin-bottom: 20rpx;
			&-order{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-mark{
					text{
						color: #796bd2;
					}
				}
				&-state{
					color: #fff;
					border-radius: 30rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
				}
				.execute{
					background-color: #fb882a;
				}
				.pending{
					background-color: #fb3835;
				}
				.accomplish{
					background-color: #63C05A;
				}
			}
		}
	}
}
	
</style>
